<template>
  <el-table stripe border :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>

    <el-table-column prop="name" label="商品名称" width="180">
      <!-- 指定插槽 -->
      <template slot-scope="scope">
        <!-- 通过scope来访问当前行的对象name -->
        商品: {{ scope.row.name }}
      </template>
    </el-table-column>

    <el-table-column prop="num" label="购买数量">
    </el-table-column>

    <el-table-column prop="price" label="单价">
      <!-- slot-scope 指定插槽作用域变量 -->
      <template slot-scope="scope">
        <!-- 通过scope来访问当前行的对象name -->
        ￥{{ scope.row.price }}
      </template>
    </el-table-column>

    <el-table-column prop="sale" label="是否在售">
      <!-- slot-scope 指定插槽作用域变量 -->
      <template slot-scope="scope">
        {{ scope.row.sale ? '是' : '否' }}
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button 
        type="danger" 
        icon="el-icon-delete"
         @click="delItem(scope.$index)"></el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '浪味仙', num: 3, price: 5.5, sale: true },
        { id: 2, name: '妙脆角', num: 2, price: 4.5, sale: true },
        { id: 3, name: '螺蛳粉', num: 3, price: 7.5, sale: true },
        { id: 4, name: '毛鸡蛋', num: 2, price: 3.5, sale: false },
      ],
    }
  },
  methods: {
    delItem(index) { //处理点击删除购物项按钮后的业务
    console.log(index);
    this.tableData.splice(index,1)
    }
  },
}

</script>
  <style lang="scss">
  body {
    background-color: #000;
  }
  </style>